<template>
  <view class="search-list">
    <view class="top f ai-c">
      <view class="search-box f f1 ai-c">
        <image src="../../static/search.png"></image>
        <u--input placeholder="请输入" border="none" v-model="queryParams.content" fontSize="12" clearable @confirm="handleSearch"></u--input>
      </view>
    </view>

    <view class="list" v-if="!loading&&list.length>0">
      <view v-for="(item,index) in list" :key="index" @click="toDetail(item)">
        <view class="list-box f ai-c jc-s-b">
          <view class="poster-box">
            <view class="pieces" v-show="item.database_type==2">共{{item.info_num}}篇</view>
            <image :src="item.image" class="poster"></image>
          </view>
          <view class="info f fd-c f1">
            <view class="title">
              {{item.title}}
            </view>
            <view class="f ai-c jc-s-b browse">
              <view>{{item.read_num}}人浏览</view>
              <view class="f ai-c">
                <image :src="item.is_collection?'../../static/collect-active.png':'../../static/collect.png'" class="collect" @click.stop="handleCollect(item)"></image>
                <image src="../../static/more.png" class="more" @click.stop="handleMore(index)"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="f jc-s-b more-box" v-show="item.checked">
          <view class="f fd-c ai-c" @click.stop="handletoCompilation(item)">
            <image src="../../static/list-collect.png"></image>
            收藏
          </view>
          <view class="f fd-c ai-c" v-show="item.is_download==1" @click.stop="handleDownload(item)">
            <image src="../../static/download.png"></image>
            下载
          </view>
          <view class="f fd-c ai-c">
            <button open-type="share" :data-obj="item" catchtap="share" style="">
              <image src="../../static/share.png"></image>
              <text>分享</text>
            </button>
          </view>
          <view class="f fd-c ai-c" @click.stop="handleShare(item)">
            <image src="../../static/pyq.png"></image>
            朋友圈
          </view>
          <view class="f fd-c ai-c" v-show="item.database_type==1&&item.is_print==1" @click.stop="handlePrint(item)">
            <image src="../../static/print.png"></image>
            打印
          </view>
        </view>
      </view>

    </view>
    <view v-if="!loading&&list.length==0" class="noData">
      <image src="../../static/noData.png" class="noData"></image>
      <view>暂无资料</view>

    </view>
    <!-- 收藏夹 -->
    <CopyFavorites ref="copyFavorites" />
  </view>
</template>

<script>
import CopyFavorites from '@/components/CopyFavorites/index.vue'
import {
  databaseSearch,
  collectionDatabase,
  collectionDatabaseSet
} from '@/api/index.js'
export default {
  components: {
    CopyFavorites
  },
  data () {
    return {
      loading: false,
      queryParams: {
        page: 1,
        limit: 10,
        content: '',
      },
      list: []
    }
  },
  onLoad (options) {
    this.queryParams.content = options.content
    this.queryParams.page = 1
    this.list = []
    this.getList()
  },
  onPullDownRefresh () {
    this.queryParams.page = 1
    this.list = []
    this.getList()
  },
  onShareAppMessage (res) {
    const data = res.target.dataset.obj
    if (res.from === 'button') {
      // 来自页面内转发按钮
      return {
        title: data.title,
        path: `/pages/share/share?id=${data.id}&shareType=friend&database_type=${data.database_type}`,
        imageUrl: data.image
      };
    }
  },
  methods: {
    handlePrint (data) {
      uni.navigateTo({
        url: `/pages/pdf/printMaterial?id=${data.id}`
      })
    },
    handleSearch () {
      this.queryParams.page = 1
      this.list = []
      this.getList()
    },
    toDetail (data) {
      if (data.database_type == 1) { //资料
	  data.read_num=data.read_num+1
        uni.navigateTo({
          url: `/pages/pdf/pdf?id=${data.id}`
        })
      } else {
        // this.$store.dispatch('getCollectFileData', data)
        uni.navigateTo({
          url: `/pages/information/list?id=${data.id}`
        })
      }
    },
    //分享到朋友圈
    handleShare (data) {
      uni.navigateTo({
        url: `/pages/share/share?type=pyq&database_type=${data.database_type}&id=${data.id}`
      })
    },
    //下载
    handleDownload (data) {
      if (data.database_type == 1) { //资料
       
        uni.navigateTo({
          url: `/pages/download/download?id=${data.id}`
        })
      } else { //合集

      }

    },
    //收藏
    async handleCollect (data) {
      // data.is_collection = !data.is_collection
     
	  if (data.is_collection) {
	  	uni.showModal({
	  		title: '提示',
	  		content: '确定取消收藏',
	  		success: async function(res) {
	  			if (res.confirm) {
	  				data.is_collection = !data.is_collection
	  				if (data.database_type == 1) {
	  				  await collectionDatabase({
	  				    database_id: data.id,
	  				    title: data.title
	  				  })
	  				} else {
	  				  await collectionDatabaseSet({
	  				    set_id: data.id,
	  				    title: data.title
	  				  })
	  				}
	  
	  			} else if (res.cancel) {
	  				console.log('用户点击取消');
	  			}
	  		}
	  	});
	  } else {
	  	data.is_collection = !data.is_collection
	  	if (data.database_type == 1) {
	  	  await collectionDatabase({
	  	    database_id: data.id,
	  	    title: data.title
	  	  })
	  	} else {
	  	  await collectionDatabaseSet({
	  	    set_id: data.id,
	  	    title: data.title
	  	  })
	  	}
	  }

    },
    //收藏选择合集
    handletoCompilation (data) {
      if (data.database_type == 1) { //资料
        this.$refs.copyFavorites.setPopup(data)
      } else {//合集
        this.handleCollect(data)
      }
    },
    //点击更多
    handleMore (index) {
      this.list.forEach((item, itemIndex) => {
        if (index == itemIndex) {
          item.checked = !item.checked
        } else {
          item.checked = false
        }

      })
    },
    async getList () {
      this.loading = true
      const {
        data
      } = await databaseSearch(this.queryParams)
      this.loading = false
      uni.stopPullDownRefresh();
      data.forEach(item => {
        item.checked = false
      })
      this.list = data
    },
  }
}
</script>

<style scoped lang="scss">
button {
  background-color: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 22rpx;
  color: #464e59;

  text {
    position: relative;
    margin-top: -14rpx;
  }
}

button::after {
  border: none;
}
.search-list {
  background: #f7f8fc;
  min-height: 100vh;
  .noData {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 24rpx;
    color: #999;

    image {
      width: 400rpx;
      height: 400rpx;
    }
  }

  .list {
    width: 710rpx;
    margin: 100rpx auto 0 auto;

    .more-box {
      font-size: 22rpx;
      color: #464e59;
      margin-top: 24rpx;
      margin-bottom: 10rpx;
      padding: 0 24rpx;
      box-sizing: border-box;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 8rpx;
      }
    }

    .list-box {
      background: #fff;
      border-radius: 24rpx;
      padding: 24rpx;
      box-sizing: border-box;
      margin-bottom: 16rpx;

      .info {
        .browse {
          color: #999999;
          font-size: 24rpx;
          margin-top: 40rpx;

          .collect {
            width: 30rpx;
            height: 30rpx;
            margin-right: 16rpx;
          }

          .more {
            width: 30rpx;
            height: 30rpx;
          }
        }

        .title {
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 28rpx;
          font-weight: 700;
        }

        .recommend {
          background: linear-gradient(to right, #36c684, #03c9ba);
          width: 80rpx;
          height: 35rpx;
          color: #fff;
          font-size: 24rpx;
          border-radius: 8rpx;
          display: inline-block;
          text-align: center;
          margin-right: 8rpx;
          line-height: 35rpx;
          font-weight: 800;
        }
      }

      .poster-box {
        position: relative;

        .pieces {
          position: absolute;
          left: 0;
          top: 0;
          color: #91aeff;
          font-size: 20rpx;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 0 0rpx 20rpx 0;
          width: 90rpx;
          height: 35rpx;
          text-align: center;
          line-height: 35rpx;
        }
      }

      .poster {
        width: 170rpx;
        height: 210rpx;
        margin-right: 16rpx;
        border-radius: 0 24rpx 24rpx 0;
      }
    }
  }

  .top {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    padding: 12rpx 32rpx;
    box-sizing: border-box;
    z-index: 1111111111;
    background: #fff;

    .search-box {
      height: 70rpx;
      border: 1px solid #1880fd;
      border-radius: 60rpx;
      padding: 0 24rpx;
      box-sizing: border-box;

      image {
        width: 35rpx;
        height: 35rpx;
        margin-right: 16rpx;
      }
    }
  }
}

	@media only screen and (min-width: 750px) {
		.top {
		  position: fixed;
		  width: 100%;
		  left: 0;
		  top: 0;
		  padding: 12rpx 32rpx;
		  box-sizing: border-box;
		  z-index: 1111111111;
		  background: #fff;
		
		  .search-box {
		    height: 35px;
		    border: 1px solid #1880fd;
		    border-radius: 60rpx;
		    padding: 0 24rpx;
		    box-sizing: border-box;
		
		    image {
		      width: 17px;
		      height: 17px;
		      margin-right: 16rpx;
		    }
		  }
		}
		button {
			background-color: transparent;
			border: none;
			padding: 0;
			display: flex;
			flex-direction: column;
			font-size: 11rpx;
			color: #464e59;
		
			text {
				position: relative;
				margin-top: -10rpx;
			}
		}

		.search-list {
			

			.list {
				width: 375px;
				margin: auto;

				.more-box {
					font-size: 11px;
					color: #464e59;
					margin-top: 24px;
					margin-bottom: 10px;
					padding: 0 12px;
					box-sizing: border-box;

					image {
						width: 20px;
						height: 20px;
						margin-bottom: 8px;
					}
				}

				.list-box {
					background: #fff;
					border-radius: 12px;
					padding: 12px;
					box-sizing: border-box;
					margin-bottom: 16px;

					.info {
						.browse {
							color: #999999;
							font-size: 14px;
							margin-top: 20px;

							.collect {
								width: 15px;
								height: 15px;
								margin-right: 8px;
							}

							.more {
								width: 15px;
								height: 15px;
							}
						}

						.title {
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 14px;
							font-weight: 700;
						}

						.recommend {
							background: linear-gradient(to right, #36c684, #03c9ba);
							width: 20px;
							height: 17px;
							color: #fff;
							font-size: 12px;
							border-radius: 4px;
							display: inline-block;
							text-align: center;
							margin-right: 4px;
							line-height: 17px;
							font-weight: 800;
							position: relative;
							top: 15px;
						}
					}

					.poster {
						width: 85px;
						height: 105px;
						margin-right: 16px;
					}
				}
			}


			
		}

	}

</style>